﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" EnableEventValidation="false"  Inherits="Skyworth.CRM.Web.BasicData.Product" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>产品管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <%--[if IE]>
     <link href="../themes/css/ieHack.css" rel="stylesheet" type="text/css" />
    <![endif]--%>
    <link href="../themes/default/style.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/core.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/pages.css" rel="stylesheet" type="text/css" />
    <link href="../themes/css/Messagebox.css" rel="stylesheet" type="text/css" />
     <link href="../themes/css/wbox.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../themes/css/jquery.cluetip.css" type="text/css" />
    
     <script src="../javascripts/jquery-1.4.4.min.js" type="text/javascript"></script>
     <script src="../javascripts/dwz.core.js" type="text/javascript"></script>
     <script src="../javascripts/MessageBox.js" type="text/javascript"></script>
     <script src="../javascripts/jquery.cluetip.min.js" type="text/javascript"></script>
     <script src="../javascripts/dwz.pagination.js" type="text/javascript"></script>
      <script src="../javascripts/wbox.js" type="text/javascript"></script>
    <style type="text/css">
        .mune_thumb
        {
            float: left;
        }
        .mune_thumb img
        {
            border: 1px solid #ccc;
            padding: 5px;
            background: #fff;
            float: left;
            height:90px;
            width:90px;
        }
        .mune_thumb ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .mune_thumb ul li
        {
            width: 300px;
            color: #333;
            margin: 5px;
            padding: 5px;
            background-color: #EEE;
            float: left; /*border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;*/
            border: 1px solid #ccc;
        }
        .mune_thumb ul li.hover
        {
            background: #e4f5ff;
            border: 1px solid #707070;
            cursor: pointer;
        }
        .mune_thumb ul li.active
        {
            background: #7CC5E5;
            border: 1px solid #707070;            
        }
        .mune_thumb ul li h4
        {
            font-size: 1.4em;
            margin: 5px 0;
            padding: 0;
        }
        .mune_thumb ul li .block
        {
            float: left;
            margin-left: 5px;
            padding: 0;
            width: 190px;
        }
        .hover
        {
            background: #CCC;
            cursor: pointer;
        }
        .mune_thumb ul li p
        {
            display: none;
        }
    </style>
    <style type="text/css">
        table.layout
        {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            width: 100%;
            border: solid 1px #e7e7e7;
        }
        table.layout tr td
        {
            border-bottom: solid 1px #e7e7e7;
            padding: 0px 3px;
            background-color: #EFEFEF;
        }
        table.layout td label
        {
            padding: 2px 2px;
        }
        table.layout td.left
        {
            border-right: solid 1px #e7e7e7;
            width: 65px;
        }
        table.layout td.right
        {
            background: #FFF;
        }
        table.layout td.right,table.layout td.readOnly
        {
            padding: 5px 3px;
        }
        #PopupInfo
        {
            width: 472px;
            border-top: 1px solid #ccc;
        }
        #PopupInfo li
        {
            width: 450px;
            color: #333;
            padding: 12px 10px;
            background-color: #EEE;
            float: left;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
        #popupImg img
        {
        	border: 1px solid #ccc;
            padding: 5px;
            margin:5px;
            background: #fff;
            float: left;
            height:90px;
            width:90px;
        }
        .disabled
        {
        	color:#ccc;
        }
    </style>
    <script type="text/javascript">
        var addWindow;
        //下一页
        function dwzPageBreak(args) {
            $("#pageNum").val(args["pageNum"]);
            $("#selectedProductID").val("");
            GetProducts();
        }
        
        function LoadProductType(brandId,callback){
           var paramList = '{"brandId":"' + brandId + '"}';
           $.ajax({
               type: "POST",
               url: "Products.aspx/getProductType",
               contentType: "application/json; charset=utf-8",
               data: paramList,
               dataType: "json",
               global: false,
               success: function(data) {
                   var dataTable = jQuery.parseJSON(data.d);
                   $.each(dataTable, function(i, item) {
                       $("<option value='" + item.Id + "'>" + item.Name + "</option>").appendTo($("#ddlProuctType"));

                   });

                   if (typeof (callback) == "function") {
                       callback();
                   }
               },
               error: function(msg) { alert("发生异常，获取分类数据失败！"); }
           })
       }
       //设置翻页    
       function SetPager(totalRecords,totalPages) {          
           $("#pageMsg").text("  共【" + totalRecords + "】条，【" + totalPages + "】页");
           $("div.pagination").each(function() {
               var $this = $(this);
               $this.pagination({
                   targetType: $this.attr("targetType"),
                   totalCount: totalRecords,
                   numPerPage: $("#numPerPageSelect").val(),
                   pageNumShown: $this.attr("pageNumShown"),
                   currentPage: $("#pageNum").val()
               });
           });
       }

       function DeleteProducts(productId) {
           var paramList = '{"productId":"' + productId + '"}';
           $.ajax({
               type: "POST",
               url: "Products.aspx/DeleteProducts",
               contentType: "application/json; charset=utf-8",
               data: paramList,
               dataType: "json",
               success: function(data) {
                   if (data.d) {
                       GetProducts();
                   }
               },
               error: function(msg) { $.Messager.Alert({ Title: '系统消息', Message: "发生异常，删除产品失败！", Icon: IconType.Warning }); }

           })

       }
       
       function DisableProducts(productId) {
           var paramList = '{"productId":"' + productId + '"}';
           $.ajax({
               type: "POST",
               url: "Products.aspx/DisableProducts",
               contentType: "application/json; charset=utf-8",
               data: paramList,
               dataType: "json",
               success: function(data) {
                   if (data.d) {
                       GetProducts();
                   }
               },
               error: function(msg) { $.Messager.Alert({ Title: '系统消息', Message: "发生异常，禁用产品失败！", Icon: IconType.Warning }); }

           })
       }
       function EnableProducts(productId) {
           var paramList = '{"productId":"' + productId + '"}';
           $.ajax({
               type: "POST",
               url: "Products.aspx/EnableProducts",
               contentType: "application/json; charset=utf-8",
               data: paramList,
               dataType: "json",
               success: function(data) {
                   if (data.d) {
                       GetProducts();
                   }
               },
               error: function(msg) { $.Messager.Alert({ Title: '系统消息', Message: "发生异常，启用产品失败！", Icon: IconType.Warning }); }

           })
       }

       
        
       function GetProducts() {
           var paramList = '{"brandId":"' + $("#ddlBrand").val() + '","productName":"' + $("#txtProductName").val() + '","productTypeId":"' + $("#ddlProuctType").val() + '","orderField":"","orderValue":"","pageIndex":"' + $("#pageNum").val() + '","pagePerSize":"' + $("#numPerPageSelect").val() + '","isDisabled":"' + $("#ddlStatus").val() + '","productModel":"' + $("#txtProductModel").val() + '"}';
           $.ajax({
               type: "POST",
               url: "Products.aspx/GetProducts",
               contentType: "application/json; charset=utf-8",
               data: paramList,
               dataType: "json",
               success: function(data) {
                   var dataTable = jQuery.parseJSON(data.d);
                   //填充数据
                   $("div.mune_thumb").empty();
                   var lists = "<ul>";
                   $.each(dataTable.rows, function(i, item) {
                       lists = lists + "<li rel='" + item.ProductId + "'><img src='..\/ProductImages\/Thumbnail\/" + item.Thumbnail1 + "' alt='产品图片' rel='ProductInfo.aspx?id=" + item.ProductId + "' /><div class='block'>";
                       if (item.IsDisabled == 1)
                           lists = lists + "<h4 class='disabled'>" + item.ProductName + "</h4>"
                               + "<h3 class='disabled'>产品编码：" + item.ProductCode + "</h3>"
                               +"<h3 class='disabled'>产品型号："  + item.ProductModel + "</h3>"
                               +"<h3 class='disabled'>产品尺寸："  + item.ProductSize + "</h3>"
                               +"<h3 class='disabled'>包装尺寸："  + item.PackingSize + "</h3>";
                       else
                           lists = lists + "<h4>" + item.ProductName + "</h4>"
                               + "<h3>产品编码：" + item.ProductCode + "</h3>"
                               +"<h3>产品型号：" + item.ProductModel + "</h3>"
                               +"<h3>产品尺寸：" + item.ProductSize + "</h3>"
                               +"<h3>包装尺寸：" + item.PackingSize + "</h3>";
                       lists += "</div></li>";
                   })
                   lists += "</ul>";
                   $(lists).appendTo($("div.mune_thumb"));

                   //绑定事件
                   $(".mune_thumb ul li").click(function() {
                       $("#selectedProductID").val($(this).attr("rel"));
                       $(this).addClass("active");
                       $(this).siblings("li").removeClass("active");
                   }).hover(function() {
                       $(this).addClass('hover');
                   }, function() {
                       $(this).removeClass('hover');
                   })
                   $(".mune_thumb ul li img").cluetip({ cluetipClass: 'jtip', width: '485px', sticky: true, activation: 'click', closePosition: 'title', arrows: true, closeText: '<img src="../themes/images/cancel.png" alt="【关闭】" />' });

                   SetPager(dataTable.totalRecords, dataTable.totalPages);

               },
               error: function(msg) { $.Messager.Alert({ Title: '系统消息', Message: "发生异常，获取数据失败！", Icon: IconType.Warning }); }

           })
       
       }

       $(document).ready(function() {
           //Set Loading      
           $("#LoadingPanel").ajaxStart(function() {
               $(this).fadeIn("slow");
           }).ajaxStop(function() {
               $(this).fadeOut("fast");
           });

           GetProducts();

           $("#btnSearch").click(function() {
               GetProducts();
               return false;
           })
           /* For PostBack
           if ($("#ddlBrand").val() != "-1") {
           LoadProductType($("#ddlBrand").val(), function() {
           $("#ddlProuctType option[value='" + $("#txtProductTypeId").val() + "']").attr("selected", "selected");
           });

           }*/

           $("#ddlProuctType").change(function() {
               $("#txtProductTypeId").val($(this).val());
           })

           $("#ddlBrand").change(function() {
               $("#ddlProuctType option[value!='-1']").remove();
               $("#txtProductTypeId").val("-1");
               if ($(this).val() != "-1") {
                   LoadProductType($("#ddlBrand").val());
               }
           })

           $("div.panelBar li").hover(function() { $(this).addClass("hover"); },
                                     function() { $(this).removeClass("hover"); })

           $("#numPerPageSelect").change(function() {
               $("#pageNum").val(1);
               $("#selectedProductID").val("");
               GetProducts();
           })

           // init styles
           $("input[type=text]").addClass("textInput").focusClass("focus");
           $("div.button").hover(function() { $(this).addClass("buttonHover"); },
                                 function() { $(this).removeClass("buttonHover"); });
           $("div.buttonActive").hover(function() { $(this).addClass("buttonActiveHover"); },
                                function() { $(this).removeClass("buttonActiveHover"); }) 
                                
           $("#btnDelete").click(function() {
               if ($(this).attr("disabled") != "disabled") {
                   var productId = $("#selectedProductID").val(); 
                   var selectedProductLength = $(".mune_thumb ul li.active").length;
                   if (parseInt(productId) > 0 && selectedProductLength > 0) {
                       $.Messager.Confirm({ Title: '系统警告', Message: '删除产品会影响到订单信息，你确定要删除该产品信息吗？', Icon: IconType.Question,
                           Oncallback: function(IsYes, Id) {
                                if (IsYes) { DeleteProducts(productId); }
                           }
                       })
                   }
                   else {
                       $.Messager.Alert({ Title: '系统消息', Message: "请选择要删除的产品！", Icon: IconType.Warning });
                   }
                   return false;
               }
           })

           $("#btnUpdate").click(function() {
               if ($(this).attr("disabled") != "disabled") {
                   var productId = $("#selectedProductID").val();
                   var selectedProductLength = $(".mune_thumb ul li.active").length;
                   if (parseInt(productId) > 0 && selectedProductLength > 0) {
                       addWindow = $("#selectedProductID").wBox({ title: "修改产品信息", requestType: "iframe", target: "EditProduct.aspx?Type=update&ProductId=" + productId, iframeWH: { width: 680, height: 390} });
                       addWindow.showBox();
                   }
                   else {
                       $.Messager.Alert({ Title: '系统消息', Message: "请选择要修改的产品！", Icon: IconType.Warning });
                   }
                   return false;
               }
           })
           
           $("#btnAdd").click(function() {
               if ($(this).attr("disabled") != "disabled") {
                   addWindow = $("#selectedProductID").wBox({ title: "新增产品信息", requestType: "iframe", target: "EditProduct.aspx?Type=add", iframeWH: { width: 680, height: 390} });
                   addWindow.showBox();
               }
               return false;
           })

           $("#btnDisable").click(function() {
               if ($(this).attr("disabled") != "disabled") {
                   var productId = $("#selectedProductID").val();
                   var selectedProductLength = $(".mune_thumb ul li.active").length;
                   if (parseInt(productId) > 0 && selectedProductLength > 0) {
                       $.Messager.Confirm({ Title: '系统警告', Message: '你确定要禁用该产品吗？', Icon: IconType.Question,
                           Oncallback: function(IsYes, Id) {
                               if (IsYes) { DisableProducts(productId); }
                           }
                       })
                   }
                   else {
                       $.Messager.Alert({ Title: '系统消息', Message: "请选择要禁用的产品！", Icon: IconType.Warning });
                   }
                   return false;
               }
           })
           $("#btnEnable").click(function() {
               if ($(this).attr("disabled") != "disabled") {
                   var productId = $("#selectedProductID").val();
                   var selectedProductLength = $(".mune_thumb ul li.active").length;
                   if (parseInt(productId) > 0 && selectedProductLength > 0) {
                       $.Messager.Confirm({ Title: '系统警告', Message: '你确定要启用该产品吗？', Icon: IconType.Question,
                           Oncallback: function(IsYes, Id) {
                               if (IsYes) { EnableProducts(productId); }
                           }
                       })
                   }
                   else {
                       $.Messager.Alert({ Title: '系统消息', Message: "请选择要启用的产品！", Icon: IconType.Warning });
                   }
                   return false;
               }
           })

       })
    
    </script>
</head>
<body style="background-color: #FFF; overflow:visible">
    <div class="pageContent">
        <form id="pagerForm" runat="server" method="post">
        <table width="100%">
            <tr>
                <td>
                    <div class="searchBar" style="padding: 4px 5px;">
                        <ul>
                            <li style="float: left;"><span>产品名称：</span>
                                <asp:TextBox ID="txtProductName" runat="server"></asp:TextBox>
                            </li>
                            <li style="float: left;padding-left: 10px;"><span>规格型号：</span>
                                <asp:TextBox ID="txtProductModel" runat="server"></asp:TextBox>
                            </li>
                            <li style="float: left; padding-left: 10px;"><span>所属品牌：</span>
                                <asp:DropDownList ID="ddlBrand" DataTextField="BrandName" 
                                DataValueField="BrandId" runat="server" Style="height: 22px; line-height: 22px;"
                                      AppendDataBoundItems="True">
                                    <asp:ListItem Value="-1" Selected="True">【请选择品牌】</asp:ListItem>
                                </asp:DropDownList>
                            </li>
                            <li style="float: left; padding-left: 10px;"><span>所属分类：</span>
                                <select id="ddlProuctType" style="height: 22px; line-height: 22px;">                              
                                    <option value="-1">【请选择分类】</option>
                                </select>
                            </li> 
                            <li style="float: left; padding-left: 10px;"><span>状态：</span>
                                <select id="ddlStatus" style="height: 22px; line-height: 22px;">                              
                                    <option value="-1">【全部】</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </li>                            
                            <li style="float: left; padding-left: 20px">
                                <div class="buttonActive">
                                    <div class="buttonContent">
                                        <asp:Button ID="btnSearch" runat="server" Text="查询" ToolTip="查询产品信息" CssClass="serverButton"
                                            OnClick="btnSearch_Click" CommandArgument="5" />
                                    </div>
                                </div>
                            </li>
                            <li style="clear: both" ></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div >
                        <div class="panelBar">
                            <ul class="toolBar">
                                <li class="">
                                    <asp:LinkButton ID="btnAdd" runat="server" CommandArgument="2" CssClass="add"><span>添加产品信息</span> </asp:LinkButton></li>
                                <li class="line">line</li>
                                <li class="">
                                    <asp:LinkButton ID="btnUpdate" runat="server" CommandArgument="3" CssClass="edit"><span>修改产品信息</span> </asp:LinkButton></li>
                                <li class="line">line</li>
                                <li class="">
                                    <asp:LinkButton ID="btnDelete" runat="server" CommandArgument="4" CssClass="delete"><span>删除产品信息</span> </asp:LinkButton></li>
                                <li class="line">line</li>
                                <li class="">
                                    <asp:LinkButton ID="btnEnable" runat="server" CommandArgument="8" CssClass="add"><span>启用该产品</span> </asp:LinkButton></li>
                                <li class="line">line</li>
                                <li class="">
                                    <asp:LinkButton ID="btnDisable" runat="server" CommandArgument="7" CssClass="delete"><span>禁用该产品</span> </asp:LinkButton></li>
                                <li class="line">line</li>
                                
                                <li class="">
                                    <asp:Button ID="btnhidDelete" runat="server" Text="" Style="display: none;" OnClick="btnhidDelete_Click"  CommandArgument="4" />
                                    <input type="hidden" style="display: none;" id="selectedProductID" runat="server"  />
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="_margin-top: -2px; background-color:#ffffff">
                       
                        <div class="mune_thumb">
                            <asp:Literal ID="productsBody" runat="server"></asp:Literal>                          
                            <br style="clear:both;" />
                        </div>
                        <br style="clear:both" />
                        <div class="panelBar">
                            <div class="pages">
                                <span>每页显示</span>
                                <div style="float: left">
                                    <select id="numPerPageSelect" runat="server">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>15</option>
                                        <option>20</option>
                                        <option>25</option>
                                        <option selected="selected">30</option>
                                        <option>35</option>
                                        <option>40</option>
                                        <option>45</option>
                                        <option>50</option>
                                    </select>
                                </div>
                                <span id="pageMsg"></span>
                            </div>
                            <div class="pagination" targettype="navTab"  pagenumshown="10" >
                            </div>                        
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="hidden" id="pageNum" name="pageNum" value="1" runat="server" />
                    <input type="hidden" id="orderField" name="orderField" value="ProductName" runat="server" />
                    <input type="hidden" id="orderValue" name="orderValue" value="asc" runat="server" />
                    <input type="hidden" id="txtProductTypeId" name="txtProductTypeId" value="-1" runat="server" />
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div id="LoadingPanel" style="display:none;">
        <div id='background' class='background'>
        </div>
        <div id='progressBar' class='progressBar'>
            数据加载中，请稍等...</div>
    </div>        
</body>
</html>
